<script lang="ts" setup>
import { onActivated, ref } from 'vue'
import { useSkusStore } from '@/stores/skus'
import { ShopAdjoin } from '@/utils/graph';
import type { IDataItem, ICommoditySpecsItem } from '@/utils/types';
import { ElMessage } from 'element-plus';

// 商品规格
const commoditySpecs = ref<ICommoditySpecsItem[]>([])
// 商品
const data = ref<IDataItem[]>([])
// 可选属性
const optionSpecs = ref<string[]>([])
// 选择的属性
const specs = ref<string[]>([])

// 邻接表
const shopAdjoin = ref<ShopAdjoin>({} as ShopAdjoin)

// init
const init = () => {
  const { attrs, skus } = useSkusStore()
  commoditySpecs.value = attrs.map((item) => {
    return {
      title: item.attrLabel,
      list: item.attrValues.map(v => v.valueLabel)
    }
  })
  data.value = skus.map((item) => {
    return {
      id: item.skuId!,
      specs: item.skuAttrs.map(v => v.valueLabel)
    }
  })

  // 假设某条商品为空
  // data.value.pop()
  // data.value.pop()
  // data.value.pop()
  // data.value.splice(1, 1)

  shopAdjoin.value = new ShopAdjoin(commoditySpecs.value, data.value)
  specs.value = Array.from({ length: commoditySpecs.value.length })
  optionSpecs.value = shopAdjoin.value.querySpecsOptions(specs.value)
  console.log('邻接表', shopAdjoin.value)
  console.log('specs', specs.value)
  console.log('optionSpecs', optionSpecs.value)
}
// 有更新时重新拉取
onActivated(init)

const handleClick = (isOption: boolean, val: string, idx: number) => {
  if (specs.value[idx] !== val && !isOption) {
    console.log('禁止点击', val)
    ElMessage.warning('缺货')
    return
  }
  // 已选择的取消选中
  specs.value[idx] = specs.value[idx] === val ? '' : val
  specs.value.forEach((item, index) => {
    if (commoditySpecs.value[idx].list.includes(item) && item !== val) {
      specs.value[index] = ''
    }
  })
  optionSpecs.value = shopAdjoin.value.querySpecsOptions(specs.value)

  debugger
  console.log('已选的', specs.value)
  console.log('可选的商品规格', optionSpecs.value)
  console.log('邻接表', shopAdjoin.value)
}
</script>

<template>
  <main>
    <el-card>
      <el-form :model="{ specs }" label-suffix="：">
        <template v-for="item, index of commoditySpecs" :key="item.skuId">
          <el-form-item :label="item.title">
            <el-tag
              v-for="it of item.list"
              :key="it"
              :class="{
                tag: true,
                disabled: !optionSpecs.includes(it) && !specs.includes(it),
                selected: specs.includes(it),
              }"
              @click="handleClick(optionSpecs.includes(it), it, index)"
            >
              {{ it }}
            </el-tag>
          </el-form-item>
        </template>
      </el-form>
      <section>
        <span>选中的商品规格：</span>
        <span>{{ specs }}</span>
      </section>
    </el-card>
  </main>
</template>

<style scoped>
.tag {
  margin-left: 8px;
  cursor: pointer;
}
.disabled {
  background-color: grey;
  color: aliceblue;
  cursor: not-allowed;
  position: relative;
}
.disabled::after {
  content: '缺货';
  position: absolute;
  top: -8px;
  right: -12px;
  padding: 1px 3px;
  color: white;
  background-color: salmon;
  font-size: 12px;
  border-radius: 2px;
}

.selected {
  color: white;
  background-color: orange;
  cursor: pointer;
}
</style>
